import { h, ref, onMounted } from 'vue'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { InternalRowData, TableColumns } from '@/common/types'

export function useColumns() {
  const t = window.$t

  const columnsRef = ref({
    columns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })

  const createColumns = () => {
    const columns = [
      {
        title: t('dataManage.columnName'),
        key: 'columnName',
        className: 'name',
        width: 100,
        ellipsis: {
          tooltip: true
        }
      },
      {
        title: t('dataManage.dataType'),
        key: 'dataType',
        width: 100,
        ellipsis: {
          tooltip: true
        },
        render: (rowData: any, unused: number) =>
          h(
            'div',
            null,
            rowData.dataType + (rowData.args ? `(${rowData.args})` : '')
          )
      },
      {
        title: t('dataManage.comment'),
        key: 'columnComment',
        width: 80,
        ellipsis: {
          tooltip: true
        }
      },
      {
        title: t('dataManage.previewData'),
        key: 'previewData',
        width: 80,
        ellipsis: {
          tooltip: true
        },
        render: (rowData: any, unused: number) =>
          h('span', null, rowData.previewData)
      }
    ] as TableColumns

    columnsRef.value = {
      columns,
      tableWidth: calculateTableWidth(columns)
    }
  }
  onMounted(() => {
    createColumns()
  })

  return {
    columnsRef
  }
}
